<template>
  <!-- 我的消息 -->
  <div class="messAge">
    <el-card class="box-card">
      <div class="content">
        <div class="left-img">
          <!-- <img :src="`${$http}${userData.avatar}`" alt="" /> -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:80/ydcp-service/common/upload"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="userinfoupload"
              :src="`${$http}${userinfoupload}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="right-title">
          <ul>
            <li>
              <div style="widthL 100px;">昵称：</div>
              <el-input
                v-model="userData.nickName"
                placeholder="请输入昵称"
              ></el-input>
            </li>
            <li>
              性别：
              <el-input
                clearable
                v-model="value"
                placeholder="请输入内容"
              ></el-input>
            </li>
            <li>
              <!-- <li > -->
              兴趣：
              <!-- <el-input
                v-model="userData.userHobby"
                placeholder="请输入兴趣"
              ></el-input> -->
              <el-select
                v-model="userData.userHobby"
                clearable
                placeholder="请选择"
                @change="change($event)"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </li>

            <!-- <li v-else>兴趣：<span>暂无</span></li> -->
            <!-- <li v-else>
              兴趣：<span>{{ userData.userHobby }}</span>
            </li> -->
            <li>
              邮箱：<el-input
                v-model="userData.email"
                placeholder="请输入邮箱"
              ></el-input>
            </li>
            <li>
              手机号：<el-input
                v-model="userData.phonenumber"
                placeholder="请输入手机号"
              ></el-input>
            </li>
          </ul>
        </div>
      </div>
      <div class="sumbitBtn" @click="editUserInfor">
        <el-button type="danger">确认修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {},
      value: "",
      value2: "",
      options2: [
        {
          value: "0",
          label: "取消兴趣",
        },
        {
          value: "李宁",
          label: "李宁",
        },
        {
          value: "特步",
          label: "特步",
        },
        {
          value: "安踏",
          label: "安踏",
        },
        {
          value: "回力",
          label: "回力",
        },
      ],
      userinfoupload: "",
    };
  },
  mounted() {
    this.userHotlist();
  },
  methods: {
    // 用户信息
    async userHotlist() {
      const userId = localStorage.getItem("USERID");
      let result = await this.$request.requserinfo(userId);
      this.userData = result.data || {};
      // this.userData.sex = this.userData.sex == 1 ? '女' : '男'
      this.value = this.userData.sex == 1 ? "女" : "男";
      this.userinfoupload = result.data.avatar;
    },
    // 修改用户信息
    async editUserInfor() {
      let self = this;
      if (self.nickName == "") return self.$message.error("请输入昵称");
      if (self.sex == "") return self.$message.error("请选择性别");
      if (self.userData.userHobby == "")
        return self.$message.error("请输入兴趣");
      if (self.email == "") return self.$message.error("请输入邮箱");
      if (self.phonenumber == "") return self.$message.error("请输入手机号");
      const userId = localStorage.getItem("USERID");
      let data = {
        userId: userId,
        nickName: self.userData.nickName,
        sex: self.value == "男" ? 0 : 1,
        userHobby: self.userData.userHobby,
        email: self.userData.email,
        phonenumber: self.userData.phonenumber,
        userName: localStorage.getItem("username"),
        avatar: this.userinfoupload,
      };
      let result = await self.$request.editUserInfor(data);
      self.userData = result.data;
      self.userData.sex = self.userData.sex == 1 ? "女" : "男";
      console.log("self.userData:", self.userData);
    },
    change(e) {
      console.log('!!!',e);
    },
    handleAvatarSuccess(res, file) {
      // this.userinfoupload = URL.createObjectURL(file.raw);
      this.userinfoupload = res.fileName;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.messAge {
  .box-card {
    .content {
      display: flex;
      color: black;

      .left-img {
        margin-right: 90px;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }

      .right-title {
        width: 400px;

        ul {
          li {
            line-height: 50px;
            display: flex;
            justify-content: space-between;

            .el-input {
              width: 300px;
            }
          }
        }
      }
    }
  }
}

ul li {
  list-style-type: none;
}

.sumbitBtn {
  margin-left: 360px;
  margin-top: 100px;
}
</style>